<template>
  <div>
    <div id="TwelveClock"></div>
  </div>
</template>

<script>
let echarts = require("echarts/lib/echarts");
require("echarts-wordcloud");
import "echarts/theme/macarons.js";
export default {
  data() {
    return {
      clockInterval: null,
    };
  },
  created() {},
  mounted() {
    var chartDom = document.getElementById("TwelveClock");
    var myChart = echarts.init(chartDom);
    var option;
    var TwelveClockTimeList = {
      子时: "23：00 ～ 1：00",
      丑时: "1：00 ～ 3：00",
      寅时: "3：00 ～ 5：00",
      卯时: "5：00 ～ 7：00",
      辰时: "7：00 ～ 9：00",
      巳时: "9：00 ～ 11：00",
      午时: "11：00 ～ 13：00",
      未时: "13：00 ～ 15：00",
      申时: "15：00 ～ 17：00",
      酉时: "17：00 ～ 19：00",
      戌时: "19：00 ～ 21：00",
      亥时: "21：00 ～ 23：00",
    };
    option = {
      tooltip: {
        trigger: "item",
        formatter(params) {
          return (
            params.data.name + "<br >" + TwelveClockTimeList[params.data.name]
          );
        },
      },
      //   legend: {
      //     top: "5%",
      //     left: "center",
      //   },
      series: [
        {
          name: "时辰",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
            color: "#6c63ffaa",
          },
          label: {
            position: "inner",
            fontSize: 20,
            color: "#fff",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "20",
              fontWeight: "bold",
            },
          },

          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: "子时" },
            { value: 1, name: "丑时" },
            { value: 1, name: "寅时" },
            { value: 1, name: "卯时" },
            { value: 1, name: "辰时" },
            { value: 1, name: "巳时" },
            { value: 1, name: "午时" },
            { value: 1, name: "未时" },
            { value: 1, name: "申时" },
            { value: 1, name: "酉时" },
            { value: 1, name: "戌时" },
            { value: 1, name: "亥时" },
          ],
        },
      ],
    };
    var index = 0;
    this.clockInterva = setInterval(function () {
      myChart.dispatchAction({
        type: "hideTip",
        seriesIndex: 0,
        dataIndex: index,
      });
      // 显示提示框
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: index,
      });
      // 取消高亮指定的数据图形
      myChart.dispatchAction({
        type: "downplay",
        seriesIndex: 0,
        dataIndex: index == 0 ? 5 : index - 1,
      });
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: index,
      });
      index++;
      if (index >= 12) {
        index = 0;
      }
    }, 3000);
    option && myChart.setOption(option);
    myChart.on("click", (params) => {
      //  var a = params.dataIndex
      this.$emit("changeHour", params.name);
      // console.log(params.name, "我被点击了");
    });
    // console.log("加载完毕");
  },
  beforeDestroy() {
    clearInterval(this.clockInterva);
  },
  methods: {},
};
</script>

<style scoped>
#TwelveClock {
  width: 100%;
  margin: 0 auto;
  height: 500px;
}
</style>
